<template>
  <div class="info_config_page">
    <div class="common_form_search">
      <el-form
        ref="searchForm"
        :inline="true"
        :model="searchForm"
        class="form-inline"
      >
        <el-form-item label="订单号">
          <el-input
            v-model="searchForm.orderNo"
            placeholder="请输入订单号"
          ></el-input>
        </el-form-item>
        <el-form-item label="承租人姓名">
          <el-input
            v-model="searchForm.name"
            placeholder="请输入承租人姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="承租人身份证号">
          <el-input
            v-model="searchForm.idCard"
            placeholder="请输入承租人身份证号"
          ></el-input>
        </el-form-item>
        <el-form-item label="上链状态">
          <el-select v-model="searchForm.status" clearable placeholder="请选择">
            <el-option :value="0" label="未上链"></el-option>
            <el-option :value="1" label="已上链"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="search()" type="primary"
            >查询</el-button
          >
          <el-button size="small" @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider></el-divider>

    <div class="flex align-center table-top-btns">
      <h5 class="flex align-center">
        <svg-icon
          style="margin-right: 15px"
          icon-class="list"
          :size="15"
        />数据列表
      </h5>
    </div>
    <el-table :data="tableData" border>
      <el-table-column
        align="center"
        header-align="center"
        fixed
        prop="id"
        label="ID"
        width="60"
      />
      <el-table-column
        align="center"
        header-align="center"
        fixed
        prop="order_no"
        label="订单ID"
        width="110"
      />

      <el-table-column
        align="center"
        header-align="center"
        prop="cert_name"
        label="姓名"
        width="100"
      />
      <el-table-column
        align="center"
        header-align="center"
        label="类型"
        width="80"
      >
        <template slot-scope="scope">
          <span>{{scope.row.login_type==1? '商户会员': scope.row.login_type==2? '支付宝': '其他'}}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        prop="login_time"
        label="登录时间"
        width="100"
      />
      <el-table-column
        align="left"
        header-align="center"
        prop="zlfInfo"
        label="租赁方信息"
        min-width="190"
      >
        <template slot-scope="scope">
          <div>
            <span class="span-info">企业名称：</span
            >{{ scope.row.zlfInfo.leaseCorpName }}
          </div>
          <div>
            <span class="span-info">信⽤代码：</span
            >{{ scope.row.zlfInfo.leaseCorpId }}
          </div>
          <div>
            <span class="span-info">法⼈姓名：</span
            >{{ scope.row.zlfInfo.leaseCorpOwnerName }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        label="承租方类别"
        width="100"
      >
        <template slot-scope="scope">
          <span>{{scope.row.lessee_type==1? '企业用户': '个人用户'}}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="left"
        header-align="center"
        label="承租方信息"
        min-width="200"
      >
        <template slot-scope="scope">
          <div>
            <span class="span-info">姓名：</span
            >{{ scope.row.cert_name }}
          </div>
          <div>
            <span class="span-info">身份证：</span
            >{{ scope.row.cert_no }}
          </div>
          <div>
            <span class="span-info">手机号：</span>{{ scope.row.phone }}
          </div>
          <div>
            <span class="span-info">支付宝账号：</span
            >{{ scope.row.alipay_uid }}
          </div>
          <div>
            <span class="span-info">身份认证类型：</span
            >{{ scope.row.user_type==1? '支付宝实人': scope.row.user_type==2? '芝麻实人': '非蚂蚁实人' }}
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column
        align="left"
        header-align="center"
        label="承租方企业信息"
        min-width="200"
      >
        <template slot-scope="scope">
          <div>
            <span class="span-info">企业名称：</span
            >{{ scope.row.zlf_info.name }}
          </div>
          <div>
            <span class="span-info">注册电话：</span
            >{{ scope.row.zlf_info.phone }}
          </div>
          <div>
            <span class="span-info">信用代码：</span
            >{{ scope.row.zlf_info.number }}
          </div>
          <div>
            <span class="span-info">法人姓名：</span
            >{{ scope.row.zlf_info.boss_name }}
          </div>
          <div>
            <span class="span-info">控制人姓名：</span
            >{{ scope.row.zlf_info.boss_name }}
          </div>
        </template>
      </el-table-column> -->
      <el-table-column
        align="center"
        header-align="center"
        label="供应商"
        width="100"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.zlfInfo.leaseCorpName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        prop="chain_time"
        label="上链时间"
        width="100"
      />
      <el-table-column
        align="center"
        header-align="center"
        prop="status"
        label="上链状态"
        width="100"
      >
        <template slot-scope="scope">
          <el-tag
            class="pointer"
            :type="scope.row.status === 0 ? 'primary' : 'success'"
            @click="getParams(scope.row.chain_params)"
            disable-transitions
          >
            {{ scope.row.status == 0 ? "未上链" : "已上链" }}
          </el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column
        fixed="right"
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <div class="operate_col">
            <el-button
              v-if="scope.row.status === 0 && scope.row.trade_no != ''? true : false"
              @click="onChain(scope.row)"
              type="primary"
              size="small"
            >
              上链
            </el-button>
          </div>
        </template>
      </el-table-column> -->
    </el-table>
    <custom-page
      ref="customPage"
      :total="total"
      @getList="getList"
    ></custom-page>
    <param-dialog
      :dialogVisible="dialogVisible"
      :dialogType="dialogType"
      :requestInfo="requestInfo"
      :responseInfo="responseInfo"
      @close="closeDialog"
    ></param-dialog>

    
    <!-- <el-dialog
      :visible.sync="dialogVisible"
      :width="dialogType === 1 ? '30%' : '60%'"
      :title="dialogType === 1 ? '上链' : '参数接口'"
      custom-class="custom-dialog"
    >
      <span v-if="dialogType === 1">您确定要上链吗？</span>
      <div
        class="flex justify-center"
        v-if="dialogType === 2"
      >
        <div class="json_wrapper">
          <h5>入参接口</h5>
          <pre>{{requestInfo}}</pre>
        </div>
        <div class="json_wrapper">
          <h5>返回接口</h5>
          <pre>{{responseInfo}}</pre>
        </div>
      </div>
      <div v-if="dialogType === 3">
        <img
          :src="flowUrl"
          alt=""
        >
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          v-if="dialogType === 1"
          @click="dialogVisible = false"
        >取 消</el-button>
        <el-button
          type="primary"
          @click="closeDialog"
        >{{dialogType === 1 ? '确 定' : '关 闭'}}</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
import { getUserList } from "@/api/lease";
import customPage from "@/components/customPage";
import paramDialog from "./child/paramDialog.vue"
export default {
  components: { customPage, paramDialog },
  data() {
    return {
      tableData: [],
      total: 0,
      searchForm: {
        orderNo: "",
        name: "",
        idCard: "",
        status: "",
      },
      dialogVisible: false,
      dialogType: 1,
      requestInfo: {},
      responseInfo: {},
    };
  },
  methods: {
    search() {
      this.$refs.customPage.page = 1;
      this.getList();
    },
    // 重置
    reset() {
      this.searchForm = Object.assign({});
      this.getList();
    },
    onChain(row) {
      this.dialogType = 1;
      this.dialogVisible = true
    },
    getParams(row) {
      this.dialogType = 2;
      this.dialogVisible = true
      let info = JSON.parse(row)
      this.requestInfo = info.request ? JSON.parse(info.request.biz_content) : {}
      this.responseInfo = info.response? info.response : {}
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    // 获取列表
    getList() {
      const { page, pageSize } = this.$refs.customPage;
      getUserList({
        page,
        pageSize,
        ...this.searchForm
      }).then((res) => {
        this.tableData = res.data;
        this.total = res.total;
      });
    },
  },
  mounted() {
    this.getList();
  },
};
</script>

<style lang="scss" scoped>

  .custom-dialog {
    .el-dialog__header {
      background: #f5f5f5;
      box-shadow: 0px 1px 0px 0px #eeeeee;
    }
    .el-dialog__footer {
      text-align: center;
    }
  }
</style>
